﻿@model Web.Viewmodels.BoardViewModel

<style type="text/css">
    .highlight-white {
        -webkit-box-shadow: inset 0 0 3px 3px white;
        -moz-box-shadow: inset 0 0 3px 3px white;
        box-shadow: inset 0 0 3px 3px white;
    }

    .highlight-black {
        -webkit-box-shadow: inset 0 0 3px 3px black;
        -moz-box-shadow: inset 0 0 3px 3px black;
        box-shadow: inset 0 0 3px 3px black;
    }
</style>

<h2>Board</h2>
<div class="conceal-sub-section">
    @Html.EditorFor(m => Model.GameId)
</div>

<div style="width: 800px;">
    <div style="float: left; width: 400px;">
        <div id="board" style="width: 400px; height: 400px;"></div>
        <p>Status: <span id="status"></span></p>
        <p>FEN: <span id="fen"></span></p>
        <p>PGN: <span id="pgn"></span></p>
    </div>
    <div style="width: 300px; float: right;">
        <div style="height: 300px;">
            <input id="player2-clock" value="00:05:00" disabled="disabled">
        </div>
        <div>
            <input id="player1-clock" value="00:05:00" disabled="disabled">
        </div>
    </div>

    <div id="divPromotionDialog" title="Basic dialog" style="background-color: white; border: 1px solid black; display: none;">
        <p>Choose which piece you want<br/>
        </p>

        <button id="btnQueen" value="Queen" title="Queen" name="Queen">Queen</button>
        <button id="btnKnight" value="Knight" title="Knight" name="Knight">Knight</button>
        <button id="btnBishop" value="Bishop" title="Bishop" name="Bishop">Bishop</button>
        <button id="btnRook" value="Rook" title="Rook" name="Rook">Rook</button>
    </div>
</div>

@Scripts.Render("~/bundles/Tock")
@Scripts.Render("~/Scripts/Board")

<script type="text/javascript">
    $(document).ready(function() {
        board.init(@Model.TimeControl, '@Model.Player1Color', '@Model.GameType');
    });
</script>
